<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stove :: ScrollContainer</title>
<link href="style/common.css" rel="stylesheet"/>
<style>
#container
{
	display:inline-block;
	background-color: #fff;
	border: solid 1px #000;
	width: 400px;
	height: 400px;
	overflow:hidden;
	text-align:left;
}
#containerS
{
	display:inline-block;
	background-color: #fff;
	border: solid 1px #000;
	width: 100px;
	height: 100px;
	overflow:hidden;
	text-align:left;
}
#tabMenuContainer
{
	display:inline-block;
	overflow:hidden;
	width: 600px;
	height: 28px;
	background-color: #ff0;
	border: solid 1px #000;
}
#tabMenu
{
	width: 1000px;
	height: 22px;
}
#tabMenu div
{
	display: inline-block;
	position: relative;
	padding: 0px 15px 0px 15px;
	height: 22px;
	text-align: center;
	font-size:18px;
	font-weight:bold;
	color: #000;
}
#tabMenu .buttonUp
{
	
}
#tabMenu .buttonDown
{
	
}
#tabMenu .buttonSelected
{
	color: #f00;
}


</style>
<script src="./js/importlibs.js"></script>
<script type="text/javascript">

window.onload = function()
{
	var _scrollContents		= new ScrollComponentInfo();
	_scrollContents.hHead	= "./resource/scrollleft.png";
	_scrollContents.hBody	= "./resource/scrollbarh.png";
	_scrollContents.hTail	= "./resource/scrollright.png";
	_scrollContents.vHead	= "./resource/scrolltop.png";
	_scrollContents.vBody	= "./resource/scrollbar.png";
	_scrollContents.vTail	= "./resource/scrollbtm.png";
		
		
	var _scrollContainer 	= new ScrollContainer( document.getElementById( "container" ), _scrollContents );
	
	
	var _tabMenuContainer 	= new ScrollContainer( document.getElementById( "tabMenuContainer" ), _scrollContents );
	_tabMenuContainer.setVirticalScrollEnabled( false );
	var _tabMenu			= new TabMenu( document.getElementById( "tabMenu" ), "buttonUp", "buttonDown", "buttonSelected" );
	_tabMenu.autoSize();
	
	//var _tabMenuDiv			= document.getElementById( "tabMenu" );
	//_tabMenuDiv.style.width	= (_tabMenuDiv.lastChild.offsetLeft + _tabMenuDiv.lastChild.offsetWidth)+"px";
	
	var _scrollContainerSmall 	= new ScrollContainer( document.getElementById( "containerS" ), _scrollContents );
}

</script>
</head>

<body>
<h1>ScrollContainer</h1>
<br>
Drag and Flicking!
<hr>
<div style="width:100%;text-align:center">
<strong>Case1</strong>. Image Viewer<br />
  <div id="container">
        <img name="content" src="./images/sampleImage.jpg"/>
    </div>
<hr>
<strong>Case2</strong>. TabMenu<br />
<div id="tabMenuContainer">
	<div id="tabMenu">
   	  <div>아이템1</div>
      <div>아이템2</div>
      <div>아이템3</div>
      <div>아이템4</div>
      <div>아이템5</div>
      <div>아이템6</div>
      <div>아이템7</div>
      <div>아이템8</div></div>
</div>
<br /><span class="MethodSpan">function</span> setVirticalScrollEnabled( <span class="MethodSpan">false</span> );<br>
<hr>
<strong>Case3</strong>. Image Viewer(Small)<br />
  <div id="containerS">
        <img name="content" src="resource/scrolltop.png"/>
    </div>
<hr>

<p>
[Propoerties]

</p>
<p>
[Method]<br>
<span class="MethodSpan">function</span> setContent( content ) : View 영역에 보여질 컨텐츠<br>
<span class="MethodSpan">function</span> setHorizontalScrollEnabled( boolValue ) : 가로 스크롤 활성/비활성<br>
<span class="MethodSpan">function</span> setVirticalScrollEnabled( boolValue ) : 세로 스크롤 활성/비활성<br>
</p>
<p>
[Call Back Function] 
  <br>
</p>

</body>
</html>
